<template>
  <div id="Header">
    <el-row class="container" id="search">
      <el-col :span="12">
        <h1 class="logo">
          <a href="/">
            <img src="~assets/img/logo.png" alt="聚贸矿产"/>
          </a>
        </h1>
      </el-col>
      <el-col :span="12">
        <search @searchSelect="searchSelect" :hot="hot"></search>
      </el-col>
    </el-row>

    <div class="container">
      <MainNav></MainNav>
    </div>
  </div>
</template>

<script>
  import Search from '~/components/Search.vue'
  import MainNav from '~/components/MainNav.vue'

  export default {
    data () {
      return {
        hot: [

        ]
      }
    },
    methods: {
      searchSelect (search) {
        const type = search.type === 0 ? 'historysProducts' : 'historysEnterprises'
        const data = search.data || {}
        //  必须有keyword
        if (data.keyword) {
          try {
            let historySearch = JSON.parse(localStorage.getItem(type)) || []
            historySearch.unshift(data.keyword)
            localStorage.setItem(type, JSON.stringify([...new Set(historySearch)].slice(0, 10)))
          } catch (e) {
            console.log(e)
          }
        }
      }
    },
    components: {
      Search,
      MainNav
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  #Header {
    background-color: #fff;
    padding: 22px 0 0;
    border-bottom: 1px solid #ddd;
  }

  #search {
    padding-bottom: 8px;
  }

  .logo {
    height: 65px;
    overflow: hidden;
  }
</style>
